<template>
  <el-dialog
    :title="isAdd ? '新建触达' : '编辑触达'"
    :visible.sync="dialogReachData.isShow"
    :before-close="labelHandleClose"
  >
    <el-form ref="addFormEl" :model="form" :rules="formRules">
      <el-form-item label="触达用户" label-width="90px">
        <el-select v-model="reachUser" placeholder="请选择">
          <el-option
            v-for="item in userList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="触达时间" label-width="90px" prop="date">
        <el-date-picker
          v-model="form.date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="触达通道" label-width="90px">
        <el-select v-model="orderValue" placeholder="请选择">
          <el-option
            v-for="item in orderList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="orderValue === '选项1' || orderValue === '选项3'"
        label="标题"
        label-width="90px"
        prop="title"
      >
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item
        v-if="orderValue === '选项3'"
        label="接受类型"
        label-width="90px"
      >
        <el-radio v-model="form.radio" label="1">
          备选项
        </el-radio>
        <el-radio v-model="form.radio" label="2">
          备选项
        </el-radio>
      </el-form-item>
      <el-form-item v-if="orderValue === '选项3'" label="图片" prop="picture">
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
          <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>
      </el-form-item>
      <el-form-item
        v-if="orderValue === '选项4'"
        label="弹屏图片"
        prop="Playpicture"
      >
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
          <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>
      </el-form-item>
      <el-form-item v-if="orderValue !== '选项4'" label="内容" prop="content">
        <el-input
          v-model="form.content"
          type="textarea"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="cancelLabel">
        取 消
      </el-button>
      <el-button type="success" @click.prevent="handelAdd">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'reachAddEdit',
  msg: '创建活动-触达设置-新增/编辑弹窗',
  props: ['dialogReachData'],
  data() {
    return {
      isAdd: true, // 新增-true,编辑-false
      loading: true,
      // 表单数据
      form: {
        date: '', // 时间
        title: '', // 标题
        radio: '1', // 接受类型
        picture: '', // 图片
        Playpicture: '' // 弹屏图片
      },
      userList: [
        {
          value: '1',
          label: '发布活动用户'
        },
        {
          value: '2',
          label: '参与活动用户'
        },
        {
          value: '3',
          label: '提交活动用户'
        },
        {
          value: '4',
          label: '一等奖用户'
        }
      ],
      orderList: [
        {
          value: '选项1',
          label: '推送'
        },
        {
          value: '选项2',
          label: '短信'
        },
        {
          value: '选项3',
          label: '站内信'
        },
        {
          value: '选项4',
          label: '弹屏'
        },
        {
          value: '选项5',
          label: '公众号'
        },
        {
          value: '选项6',
          label: '小程序'
        }
      ],
      reachUser: '', // 用户
      orderValue: '选项1',
      formRules: {
        reachUser: [
          { required: true, message: '请输入触达名称', trigger: 'blur' }
        ],
        date: [{ required: true, message: '请输入权限字符', trigger: 'blur' }],
        order: [{ required: true, message: '请输入显示顺序', trigger: 'blur' }],
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.isAdd = this.dialogReachData.type === 'add'
    if (this.dialogReachData.type === 'edit') {
      this.form = Object.assign({}, this.dialogReachData.params)
    }
  },
  methods: {
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogReachData.isShow = false
    },
    handelAdd() {
      this.$refs.addFormEl.validate((valid) => {
        if (!valid) {
          return
        }
        this.dialogReachData.isShow = false
        this.$emit('addEdit-success')
      })
    }
  }
}
</script>
<style lang="less">
.el-dialog {
  border-radius: 4px;
  .el-dialog__header {
    border-bottom: 1px solid rgba(225, 228, 233, 1);
  }
}
</style>
